<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商城</el-breadcrumb-item>
      <el-breadcrumb-item>商城信息列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="filter-container" shadow="never" style="margin-top:30px">
      <div style="margin-top: 15px;">
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
  <el-button type="primary" @click="handleAdd" style="float:right">添加</el-button>
        <el-form :inline="true" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input
              class="input-width"
              placeholder="商城名称"
              v-model="input1"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="公安备案号">
            <el-input
              class="input-width"
              placeholder="公安备案号"
              v-model="input2"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="ICP备案号">
            <el-input
              class="input-width"
              placeholder="ICP备案号"
              v-model="input3"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <el-table :data="tables" style="width: 100%;" border>
      <el-table-column label="Id" width="180" prop="id" type="index">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px;">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="商城名称"
        width="180"
        prop="mallName"
        align="center"
      >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.mallName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
        label="公安备案号"
        width="180"
        prop="public"
        align="center"
      >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.public }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="ICP备案号" width="180" prop="icp" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.icp }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="商城logo" width="250" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <img
                :src="'http://localhost:5000/' + scope.row.logo"
                alt=""
                width="200px"
                height="100px"
              />
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <!-- scope.row  代表一行的数据 scope.row.msg_state 代表状态的值 -->
          <!-- {{scope.row}} -->
          <el-switch
            v-model="scope.row.isActived"
            @change="onChange(scope.$index, scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

     
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 模态框，用于用户的增加和修改 -->
    <el-dialog title="商城信息" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="商城名称" :label-width="formLabelWidth">
          <el-input v-model="formData.mallName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="公安备案号" :label-width="formLabelWidth">
          <el-input v-model="formData.public" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="ICP备案号" :label-width="formLabelWidth">
          <el-input v-model="formData.icp" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商城logo" :label-width="formLabelWidth">
          <el-upload
            ref="upload"
            :auto-upload="false"
            class="upload-demo"
            :limit="1"
            action="#"
            :on-remove="imgBroadcastRemove"
            list-type="picture"
            :on-change="imgBroadcastChange"
            :http-request="handleUploadAvatar"
            accept="image/jpg,image/png,image/jpeg"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
    
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageIndexChange"
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
        background
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {getList,vimState,addMall,modMall,deleteMall} from '../../api/shoppingMall'
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      tableData: [],
      pager: {
        pageIndex: 1,
        pageSize: 10,
        rowsTotal: 30,
      },
      dialogFormVisible: false,
      formData: {
        id: 0,
        mallName: '',
        logo: '',
        icp: '',
        public: '',
        remarks: '',
        isActived:true
      },
      formLabelWidth: '120px',
      currentIndex: 0,
    }
  },
  //挂载
   mounted() {
    this.fetchData(this.pager)
    setTimeout(() => {
      console.log(this.tableData)
    }, 1000)
  },
  
  //搜索
  computed: {
    tables() {
      const input1 = this.input1;
      const input2 = this.input2;
      const input3 = this.input3;

      if (input1) {
        console.log(
          'input输入的搜索内容：' + this.input1,
        )
        return this.tableData.filter((data) => {
          return (
            data.mallName.includes(this.input1)
        
          )
        })
      }else if(input2){
              console.log(
          'input输入的搜索内容：' + this.input2,
        )
        return this.tableData.filter((data) => {
          return (
            data.public.includes(this.input2)
        
          )
        })
      }else if(input3){
              console.log(
          'input输入的搜索内容：' + this.input3,
        )
        return this.tableData.filter((data) => {
          return (
            data.icp.includes(this.input3)
        
          )
        })
      }

      return this.tableData
    },
  },
  methods: {
       //修改状态
    onChange(index, row) {
      console.log(index, row)
      this.formData.isActived = row.isActived
      vimState(row.id, this.formData).then((data) => {
        console.log(data)
        if (data.data.isActived == false) {
          console.log(data.msg);
          this.$message.error(data.msg)
        } else {
          console.log(data.msg);
          this.$message.success(data.msg)
        }
      })
    },
    // 模态框取消
    handleCancel() {
      this.dialogFormVisible = false
    },

    //添加
    handleAdd() {
      this.dialogFormVisible = true
      this.formData.id = 0
      this.formData.mallName = ''
      this.formData.public = ''
      this.formData.icp = ''
      this.formData.logo = ''

    },
    //编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true
      this.formData.id = row.id
      this.formData.mallName = row.mallName
      this.formData.public = row.public
      this.formData.icp = row.icp
      this.formData.logo = row.logo
      

      // 编辑时获得当前表数组中的下标
      this.currentIndex = index
      console.log(index, row)
    },

    //删除
    handleDelete(index, row) {
      //删除指定id用户
      this.tableData.splice(index, 1)
      //相应删掉id的数据
      deleteMall(row.id)
      //相应的表数据要减掉一条数据
      this.pager.rowsTotal = this.pager.rowsTotal - 1
      this.$message('删除成功')
      console.log(index, row)
      console.log(index, row)
    },

    // 提交弹窗数据
    handleSave() {
      this.$refs.upload.submit()
    },
    handleUploadAvatar(file) {
      console.log(file)
      console.log(this.formData.id)
      if (this.formData.id == 0) {
        // 添加
        const fileObj = file.file
        const form1 = new FormData()
        form1.append('mallName', this.formData.mallName)
        form1.append('public', this.formData.public)
        form1.append('icp', this.formData.icp)
        form1.append('imageFile', fileObj)


        addMall(form1).then(({ data }) => {
          this.tableData.push(data)
          console.log(data)
          this.$message.success('添加成功')
        })
        this.dialogFormVisible = false
        this.$refs.upload.clearFiles()
      } else {
        //编辑
        console.log(file.file)
        console.log(this.formData.id)
        const fileObj = file.file
        const form1 = new FormData()
         form1.append('mallName', this.formData.mallName)
        form1.append('public', this.formData.public)
        form1.append('icp', this.formData.icp)
        form1.append('imageFile', fileObj)
  

        modMall(this.formData.id, form1).then(({ data }) => {
          this.tableData.splice(this.currentIndex, 1, data)
          this.dialogFormVisible = false
          this.$message.success('修改成功')
        })
        this.$refs.upload.clearFiles()
      }
    },

    //图片限制
    imgBroadcastChange(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB
      if (!isLt2M) {
        this.formData.imgBroadcastList = fileList.filter(
          (v) => v.uid !== file.uid,
        )
        this.$message.error(
          '图片选择失败，每张图片大小不能超过 2MB,请重新选择!',
        )
      }
    },

    // 有图片移除后 触发
    imgBroadcastRemove(fileList) {
      this.formData.imgBroadcastList = fileList
    },
    // 页面页码改变时，重新拉取数据
    handlePageIndexChange(val) {
      console.log(val)
      this.pager.pageIndex = val > 0 ? val : 1
      this.fetchData(this.pager)
    },
    // 页面大小改变时，重新拉取数据
    handlePageSizeChange(val) {
      console.log(val)
      this.pager.pageSize = val
      this.fetchData(this.pager)
    },
    // 拉取后台数据（带分页）
    fetchData(pager) {
      getList(pager).then((data) => {
        console.log(data)

        this.tableData = data.data.data
        console.log(this.tableData)
        this.pager = data.data.pager
      })
    },
  },
}
</script>

<style>
.input-width {
  width: 250px;
}
</style>
